let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development', // 开发模式
  entry: {
    'index': './src/main.js',
    'home': './src/home.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist')
  },
  devServer: {
    port: 3106,
    progress: true,//进度条
    compress: true,//Gzip压缩
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            compiler: require('vue-template-compiler'),
            transformAssetUrls: {
              video: ['src', 'poster'],
              source: 'src',
              img: 'src',
              image: ['xlink:href', 'href'],
              use: ['xlink:href', 'href']
            }
          }
        }],
        include: path.join(__dirname, './src'),
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg|bmp|mp4|mp3)$/,
        use: [{
          loader:'file-loader',
          options: {
            limit:10240,
            name:"[name].[ext]",
            esModule: false
          }
        }]
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: [
                '@babel/plugin-transform-runtime'
              ]
            }
          }
        ],
        include: path.join(__dirname, './src'),
        exclude: /node_modules/
      },
      // 顺序 先加载的是css-loader:转换css的 js  style-loader  插入到html文件中
      {
        test: /\.css$/,
        use: [
          'vue-style-loader', 'style-loader', 'css-loader'
        ]
      }
    ]
  },
  resolve:{
    alias:{// 2.0之后
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.join(__dirname, './src')
    },
    extensions: ['.js','.jsx','.vue','.json','.css']
  },

  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      chunks: ['index'],
      minify: {
        removeAttributeQuotes: true, // 双引号就没了
        collapseWhitespace: true// 单行
      }
    }),
    new HtmlWebpackPlugin({
      template: './home.html',
      filename: 'home.html',
      chunks: ['home'],
      minify: {
        removeAttributeQuotes: true, // 双引号就没了
        collapseWhitespace: true// 单行
      }
    })
  ]
};
